<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>shidaiclient</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link href="/static/lib/css/mui.css" rel="stylesheet"/>
    <link href="/static/lib/css/swiper-3.4.2.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/components/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/static/components/css/home.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<!--搜索框在banner上，下拉banner颜色不会渐变-->
<header id="header" class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="home_close"></a>
    <div id="search">
        <a href="{{ url_for('home.game_search') }}">
            <div id="search_child" class="iconfont icon-sousuo">
                火柴人格斗
            </div>
        </a>
    </div>
</header>
<div id="pullrefresh" class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <div id="tabbar" class="mui-control-content mui-active">

            <!--banner-->
            <div class="swiper-container-home" id="home_banner">
                <div class="swiper-wrapper">
                    <!--
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/components/img/home/home_banner_one_06.jpg" /></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/components/img/home/home_banner_two_06.jpg" /></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/components/img/home/home_banner_three_06.jpg" /></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="../static/components/img/home/home_banner_four_06.jpg" /></a>
                    </div>
                    -->
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination" style="text-align: right;padding-right: 20px;"></div>
            </div>
            <div class="box-a">
                <ul class="home_three_icon">
                    <li>
                        <img src="/static/components/img/home/blank.png"/>
                    </li>
                    <li>
                        <img src="/static/components/img/home/blank.png"/>
                    </li>
                    <li>
                        <img src="/static/components/img/home/blank.png"/>
                    </li>
                    <li>
                        <img src="/static/components/img/home/home_icon_05.png" id="icon_found"/>
                    </li>
                    <li>
                        <img src="/static/components/img/home/home_icon_03.png" id="icon_allgame"/>
                    </li>
                    <li>
                        <img src="/static/components/img/home/home_icon_07.png" id="icon_fuli"/>
                    </li>
                </ul>
            </div>
            <div class="home_three_icon_line"></div>
            <div id="home_column_title_main" class="iconfont icon-remen">
                热门排行
            </div>
            <!--可以滑动的图标-->
            <div class="home_slider_column">
                <div class="swiper-container-column-home">
                    <div class="swiper-wrapper hot_swiper-wrapper">
                        <!--<span class="swiper-slide" style="text-align: center;">
                            <a href="detail3.html">
                                <span class="mui-icon">
                                    <img src="../static/components/img/home/home_rmph_icon_10.png" />
                                </span>
                            <h3 class="home_column_title">王者荣耀</h3>
                            </a>
                            <h4 class="mui-media-body">
                                <span class="iconfont icon-xing1"></span>
                                  <span class="iconfont icon-xing1"></span>
                                  <span class="iconfont icon-xing1"></span>
                                  <span class="iconfont icon-ban_xing2"></span>
                                  <span class="iconfont icon-xingxing"></span>
                            </h4>
                            <h3 class="mui-media-body home_download">
                                <span class="home_download_child iconfont icon-xiazai">
                                    下载
                                </span>
                            </h3>
                        </span>
                        <span class="swiper-slide" style="text-align: center;">
                        <a href="#">
                            <span class="mui-icon">
                                <img src="../static/components/img/home/home_rmph_icon_12.png" />
                            </span>
                        <h3 class="home_column_title">阴阳师</h3>
                        </a>
                        <h4 class="mui-media-body">
                            <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-ban_xing2"></span></h4>
                        <h3 class="mui-media-body home_download">
                            <span class="home_download_child iconfont icon-xiazai">
                                下载
                            </span>
                        </h3>
                        </span>
                        <span class="swiper-slide" style="text-align: center;">
                        <a href="#">
                            <span class="mui-icon">
                                <img src="../static/components/img/home/home_rmph_icon_14.png" />
                            </span>
                        <h3 class="home_column_title">龙之谷</h3>
                        </a>
                        <h4 class="mui-media-body">
                            <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                        </h4>
                        <h3 class="mui-media-body home_download">
                            <span class="home_download_child iconfont icon-xiazai">
                                下载
                            </span>
                        </h3>
                        </span>
                        <span class="swiper-slide" style="text-align: center;">
                        <a href="#">
                            <span class="mui-icon">
                                <img src="../static/components/img/home/home_rmph_icon_16.png" />
                            </span>
                        <h3 class="home_column_title">光明大陆</h3>
                        </a>
                        <h4 class="mui-media-body">
                            <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-ban_xing2"></span></h4>
                        <h3 class="mui-media-body home_download">
                            <span class="home_download_child iconfont icon-xiazai">
                                下载
                            </span>
                        </h3>
                        </span>
                        <span class="swiper-slide" style="text-align: center;">
                        <a href="#">
                            <span class="mui-icon">
                                <img src="../static/components/img/home/home_rmph_icon_18.png" />
                            </span>
                        <h3 class="home_column_title">苍穹变</h3>
                        </a>
                        <h4 class="mui-media-body">
                            <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                              <span class="iconfont icon-xing1"></span>
                        </h4>
                        <h3 class="mui-media-body home_download">
                            <span class="home_download_child iconfont icon-xiazai">
                                下载
                            </span>
                        </h3>
                        </span>-->

                    </div>
                </div>
            </div>

            <!--分割线-->
            <div class="home_hotgame_line"></div>
            <div id="home_bigitem_title_main" class="iconfont icon-tuijian">
                游戏推荐
            </div>
            <div class="home_bigitem_list">
                <!--<div class="mui-row">
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <img class="big_item_img" src="../static/components/img/home/home_yxtj_pic_30.jpg" />
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <div class="mui-ellipsis big_item_column_title">
                            朕的江山-<span class="big_item_column_title_tail">三天成霸业</span>
                        </div>
                        <div class="mui-row big_item_column_text">
                            <div class="mui-col-sm-8 mui-col-xs-8 mui-ellipsis-4" style="position: absolute;bottom: 0;">
                                首创竞技策略手游，百城无缝大地图，真实展现了三国时期的整体图景。 内政+军事+计策…
                            </div>
                            <div class="div_bigitem_download">
                                <div class="big_item_download iconfont icon-xiazai">下载</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home_bigitem_cut_off_line"></div>
                <div class="mui-row">
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <img class="big_item_img" src="../static/components/img/home/home_yxtj_pic_33.jpg" />
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <div class="mui-ellipsis big_item_column_title">
                            犬夜叉-<span class="big_item_column_title_tail">培育可爱又霸气的妖宠吧</span>
                        </div>
                        <div class="mui-row big_item_column_text">
                            <div class="mui-col-sm-8 mui-col-xs-8 mui-ellipsis-4" style="position: absolute;bottom: 0;">
                                高桥留美子正版授权手游《犬夜叉-寻玉之旅》，是一款高度自由的MMO卡牌角色扮演游…
                            </div>
                            <div class="div_bigitem_download">
                                <div class="big_item_download iconfont icon-xiazai">下载</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home_bigitem_cut_off_line"></div>
                <div class="mui-row">
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <img class="big_item_img" src="../static/components/img/home/home_yxtj_pic_35.jpg" />
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <div class="mui-ellipsis big_item_column_title">
                            阴阳西游-<span class="big_item_column_title_tail">首创变身手游</span>
                        </div>
                        <div class="mui-row big_item_column_text">
                            <div class="mui-col-sm-8 mui-col-xs-8 mui-ellipsis-4" style="position: absolute;bottom: 0;">
                                首款变身手游：英雄大变身，暴力纯输出！ 首款战中回合：生死由你决策，胜负认你操作首…
                            </div>
                            <div class="div_bigitem_download">
                                <div class="big_item_download iconfont icon-xiazai">下载</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home_bigitem_cut_off_line"></div>
                <div class="mui-row">
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <img class="big_item_img" src="../static/components/img/home/home_yxtj_pic_37.jpg" />
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <div class="mui-ellipsis big_item_column_title">
                            圣剑守护-<span class="big_item_column_title_tail">超Q人设 萌娘军团</span>
                        </div>
                        <div class="mui-row big_item_column_text">
                            <div class="mui-col-sm-8 mui-col-xs-8 mui-ellipsis-4" style="position: absolute;bottom: 0;">
                                不管你是萝莉控、御姐控、长发控、短发控，各种萌娘应有尽有。百变英雄，百变属性！软妹陪你…
                            </div>
                            <div class="div_bigitem_download">
                                <div class="big_item_download iconfont icon-xiazai">下载</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home_bigitem_cut_off_line"></div>
                <div class="mui-row">
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <img class="big_item_img" src="../static/components/img/home/home_yxtj_pic_39.jpg" />
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <div class="mui-ellipsis big_item_column_title">
                            傲剑奇缘-<span class="big_item_column_title_tail">坐骑免费领</span>
                        </div>
                        <div class="mui-row big_item_column_text">
                            <div class="mui-col-sm-8 mui-col-xs-8 mui-ellipsis-4" style="position: absolute;bottom: 0;">
                                016年度新作-修仙封神榜手游《傲剑奇缘》，经典职业，超多玩法！PK模式引燃战场，打造最…
                            </div>
                            <div class="div_bigitem_download">
                                <div class="big_item_download iconfont icon-xiazai">下载</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home_bigitem_cut_off_line"></div>
                <div class="mui-row">
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <img class="big_item_img" src="../static/components/img/home/home_yxtj_pic_41.jpg" />
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <div class="mui-ellipsis big_item_column_title">
                            坦克连-<span class="big_item_column_title_tail">来了就送VIP送猪肉</span>
                        </div>
                        <div class="mui-row big_item_column_text">
                            <div class="mui-col-sm-8 mui-col-xs-8 mui-ellipsis-4" style="position: absolute;bottom: 0;">
                                《坦克连》是网易首款战争题材，以二战为背景的多人坦克实时对战手游。采用最新渲染技术，呈…
                            </div>
                            <div class="div_bigitem_download">
                                <div class="big_item_download iconfont icon-xiazai">下载</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home_bigitem_cut_off_line"></div>-->
            </div>

            <div id="home_jingpin_title_main" class="iconfont icon-jingpin">
                精品游戏
            </div>

            <div class="home_jingpin_list">
                <!--精品游戏-->
                <!--<div class="mui-row jingpin">
                    <div class="mui-col-sm-2 mui-col-xs-2">
                        <img class="jingpin_item_img" src="../static/components/img/find/find_mrxfx_icon_20.png" />
                    </div>
                    <div class="mui-col-sm-8 mui-col-xs-8">
                        <div class="jingpin_text" style=" position:relative;">
                            <div class="jingpin_text_one">
                                主宰灵域-<span class="big_item_column_title_tail">三世桃花劫</span>
                            </div>
                            <div class="mui-ellipsis-2 jingpin_text_two">
                                经典3D武侠类ARPG手游—《主宰灵域》重磅降临，承载侠义之心，传承报国之志…
                            </div>
                        </div>
                    </div>
                    <div class="mui-col-sm-2 mui-col-xs-2">
                        <div class="mui-pull-right jingpin_download iconfont icon-xiazai">下载</div>
                    </div>
                </div>
                <div class="home_bigitem_cut_off_line"></div>
                <div class="mui-row jingpin">
                    <div class="mui-col-sm-2 mui-col-xs-2">
                        <img class="jingpin_item_img" src="../static/components/img/home/home_jpyx_icon_46.png" />
                    </div>
                    <div class="mui-col-sm-8 mui-col-xs-8">
                        <div class="jingpin_text" style=" position:relative;">
                            <div class="jingpin_text_one">
                                寻找前世之旅-<span class="big_item_column_title_tail">登录送翅膀</span>
                            </div>
                            <div class="mui-ellipsis-2 jingpin_text_two">
                                交友、寻爱尽在2DMMORPG穿越奇幻风手游《寻找前世之旅》！游戏拥有跌宕起伏的剧情…
                            </div>
                        </div>
                    </div>
                    <div class="mui-col-sm-2 mui-col-xs-2">
                        <div class="mui-pull-right jingpin_download iconfont icon-xiazai">下载</div>
                    </div>
                </div>
                <div class="home_bigitem_cut_off_line"></div>-->
            </div>
        </div>
    </div>
</div>
<script src="/static/components/js/ag.js" type="text/javascript"></script>
<script src="/static/lib/js/mui.min.js"></script>
<!-- build:js /static/js/home.min.js -->
<script src="/static/lib/js/jquery.js" type="text/javascript"></script>
<script src="/static/lib/js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/components/js/util.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/components/js/getuserid.js" type="text/javascript"></script>
<!-- endbuild -->

<script type="text/javascript">

    loadingAnalyze('{{ g.analyze_url }}');

    (function () {
        //上拉加载下拉刷新
        mui.init({
            pullRefresh: {
                container: '#pullrefresh',
                down: {
                    callback: pulldownRefresh
                },
                up: {
                    contentrefresh: '正在加载...',
                    callback: pullupRefresh
                }
            }
        });

        var base_url = '{{ g.api_url }}';
        var channel_code = '{{ g.channel_code }}';

        var pageIndex = 2; //计数器
        var flag = false; //表示不够5条了，说明没有数据了

        function pullupRefresh() {
            //第一次加载后没有5条表示没有数据了
            var home_jingpin_list = document.getElementsByClassName('home_jingpin_list');
            if (home_jingpin_list[0].children.length < 5) {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
                return;
            }

            request(base_url + '/game/member/game/channel/' + channel_code, {
                "type": "map",
                "content": {
                    "area_tag": "32",
                    "page": pageIndex++,
                    "per_page": "5"
                }
            }).done(function (data) {
                dealHomeJingPinList(data);
                if (data.items.length < 5) {
                    flag = true;
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag); //参数为true代表没有更多数据了。
                }
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag); //参数为true代表没有更多数据了。
            }).fail(function () {
                console.log('dealHomeJingPinList error');
            });
        }

        function pulldownRefresh() {
            setTimeout(function () {
                document.location.reload();
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            }, 500);
        }
    })();

    function dealHomeJingPinList(json) {
        if (json.count == "0") {
            var home_jingpin_title_main = document.getElementById('home_jingpin_title_main');
            home_jingpin_title_main.style.visibility = "hidden";
            return;
        }

        var home_jingpin_container = document.getElementsByClassName('home_jingpin_list');

        for (var home_jingpingame_num = 0; home_jingpingame_num < json.items.length; home_jingpingame_num++) {
            /*整个div*/
            var div_all = document.createElement('div');
            div_all.className = 'mui-row jingpin';

            /*左边div*/
            var div_left = document.createElement('div');
            div_left.className = 'mui-col-sm-2 mui-col-xs-2';
            var img = document.createElement('img');

            img.className = 'jingpin_item_img';
            img.src = json.items[home_jingpingame_num].icon; //图片icon
            img.id = json.items[home_jingpingame_num].id;
            div_left.appendChild(img);

            mui('.home_jingpin_list').off('tap', '.jingpin_download') //解除点击
            /*右边div*/
            var div_middle = document.createElement('div');
            div_middle.className = 'mui-col-sm-7 mui-col-xs-7';
            var div_middle_html = '<div id=' +
                    json.items[home_jingpingame_num].id + //id
                    ' class="jingpin_text mui-ellipsis" style=" position:relative;"><div class="jingpin_text_one mui-ellipsis">' +
                    json.items[home_jingpingame_num].game_name + //主标题
                    '-<span class="big_item_column_title_tail">' +
                    json.items[home_jingpingame_num].game_title + //副标题
                    '</span></div><div class="mui-ellipsis-2 jingpin_text_two">' +
                    json.items[home_jingpingame_num].description + //描述
                    '</div></div>';
            div_middle.innerHTML = div_middle_html;

            /*右边div*/
            var div_right = document.createElement('div');
            div_right.className = 'mui-col-sm-3 mui-col-xs-3';
            var div_right_html = '<div class="mui-pull-right jingpin_download iconfont icon-xiazai" data_android_link="' +
                    getRealLink(json.items[home_jingpingame_num].channel_game.android_link,json.items[home_jingpingame_num].android_link) + //安卓链接
                    '" data_ios_link ="' +
                    getRealLink(json.items[home_jingpingame_num].channel_game.ios_link,json.items[home_jingpingame_num].ios_link) + //IOS链接
                    '" data-code ="' +
                    json.items[home_jingpingame_num].code + //data-code
                    '" data-id ="' +
                    localStorage.getItem('user_id') + //data-code
                    '">下载</div>';
            div_right.innerHTML = div_right_html;

            /*下滑线*/
            var div_cutdown = document.createElement('div');
            div_cutdown.className = 'home_bigitem_cut_off_line';

            div_all.appendChild(div_left);
            div_all.appendChild(div_middle);
            div_all.appendChild(div_right);
            home_jingpin_container[0].appendChild(div_all);
            home_jingpin_container[0].appendChild(div_cutdown);

        }
        mui('.home_jingpin_list').on('tap', '.jingpin_item_img', function () {
            //跳转到详情
            window.name = this.id;
            window.location.href = '{{ url_for('home.game_detail', game_id='') }}' + this.id;
            return false;
        })
        mui('.home_jingpin_list').on('tap', '.jingpin_text', function () {
            //跳转到详情
            window.name = this.id;
            window.location.href = '{{ url_for('home.game_detail', game_id='') }}' + this.id;
            return false;
        })
        mui('.home_jingpin_list').on('tap', '.jingpin_download', function () {
            download(this, isIOSClient(), this.getAttribute('data_ios_link'), this.getAttribute('data_android_link'));
            return false;
        })
    }
</script>

<script>
    window.onload = function () {
        var base_url = '{{ g.api_url }}';

        var channel_code = '{{ g.channel_code }}';

        //获取首页banner数据
        request(base_url + '/game/member/banner/' + channel_code, {
            "type": "map",
            "content": {
                "area_tag": "1",
            }
        }).done(function (data) {
            dealHomeBanner(data);
        }).fail(function () {
            console.log('home banner error');
        });


        function dealHomeBanner(json) {
            for (var home_banner_num = 0; home_banner_num < json.items.length; home_banner_num++) {
                var home_banner_container = document.getElementsByClassName('swiper-container-home');
                var div = document.createElement('div');
                div.className = 'swiper-slide';
                var a = document.createElement('a');
                var aUrl = json.items[home_banner_num].jump_url;
                a.href = isNull(aUrl) == "" ? "/" + channel_code + "/detail/" + json.items[home_banner_num].game.id : aUrl;
                var img = document.createElement('img');
                img.src = json.items[home_banner_num].cover;
                a.appendChild(img);
                div.appendChild(a);
                home_banner_container[0].children[0].appendChild(div);
            }
        }


        //获取首页热门排行数据
        //	?page=1&per_page=5
        //	page: [可选]默认值 1 是首页；传 0 表示最后一页
        //	per_page: [可选]默认值 5 每页有五条记录
        //	tag: [可选] 标签   热门:0x0008 ，推荐:0x0010，精品:0x0020，最近更新:0x0040，新游预约:0x0080，每日发现:0x0100
        console.log('sadfjfsdl');
        request(base_url + '/game/member/game/channel/' + channel_code, {
            "type": "map",
            "content": {
                "area_tag": "8",
                "page": "1",
                "per_page": "10"
            }
        }).done(function (data) {
            dealHomeHotList(appfilter(data, isIOSClient()));
        }).fail(function () {
            console.log('dealHomeHotList error');
        });

        function dealHomeHotList(json) {
            if (json.count == 0) {
                var home_column_title_main = document.getElementById('home_column_title_main');
                home_column_title_main.style.visibility = "hidden";
                return;
            }

            var home_hotgame_container = document.getElementsByClassName('swiper-container-column-home');

            for (var home_hotgame_num = 0; home_hotgame_num < json.items.length; home_hotgame_num++) {

                /*外围span*/
                var span = document.createElement('span');
                span.className = 'swiper-slide';
                span.style.textAlign = 'center';
                span.setAttribute('data_android_link', getRealLink(json.items[home_hotgame_num].channel_game.android_link,json.items[home_hotgame_num].android_link)); //安卓下载链接
                span.setAttribute('data_ios_link', getRealLink(json.items[home_hotgame_num].channel_game.ios_link,json.items[home_hotgame_num].ios_link)); //IOS下载链接
                /*a标签*/
                var a = document.createElement('a');
                a.id = json.items[home_hotgame_num].id;
                a.href = '{{ url_for('home.game_detail', game_id='') }}' + a.id;
                a.className = 'hot_a';
                var span1 = document.createElement('span');
                span1.className = 'mui-icon';
                var img = document.createElement('img');
                img.src = json.items[home_hotgame_num].icon; //小图icon
                span1.appendChild(img);
                var h3 = document.createElement('h3');
                h3.className = 'home_column_title';
                h3.innerText = json.items[home_hotgame_num].game_name; //游戏名字
                a.appendChild(span1);
                a.appendChild(h3);
                span.appendChild(a);


                /*下载按钮*/
                var h3_download = document.createElement('h3');
                h3_download.className = 'mui-media-body home_download';
                var span2 = document.createElement('span');
                span2.className = 'home_download_child iconfont icon-xiazai download';
                span2.setAttribute("data-code", json.items[home_hotgame_num].code);
                span2.setAttribute("data-id", localStorage.getItem('user_id'));
                span2.innerText = '下载';
                h3_download.appendChild(span2);
                span.appendChild(h3_download);

                home_hotgame_container[0].children[0].appendChild(span);
            }
            mui('.swiper-container-column-home').on('tap', 'a', function () {
                //跳转到详情
                //						alert('dealHomeHotList--'+this.id);
                window.name = this.id;
                window.location.href = '{{ url_for('home.game_detail', game_id='') }}' + this.id;
            });
            mui('.swiper-container-column-home').on('tap', '.home_download_child', function () {
                var spanObj = this.parentNode;
                while (spanObj.nodeName != 'SPAN' && spanObj.parentNode != null) {
                    spanObj = spanObj.parentNode;
                }
                download(this, isIOSClient(), spanObj.getAttribute('data_ios_link'), spanObj.getAttribute('data_android_link'));
            });

            //首页column的swiper
            new Swiper('.swiper-container-column-home', {
                direction: 'horizontal', //'horizontal',//'vertical',
                loop: false,
                slidesPerView: 3.9,
                paginationClickable: true,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
                // 如果需要分页器
                //pagination: '.swiper-pagination',
            })
        }

        //获取首页游戏推荐数据
        //	?page=1&per_page=5
        //	page: [可选]默认值 1 是首页；传 0 表示最后一页
        //	per_page: [可选]默认值 5 每页有五条记录
        //	tag: [可选] 标签   热门:0x0008 ，推荐:0x0010，精品:0x0020，最近更新:0x0040，新游预约:0x0080，每日发现:0x0100

        request(base_url + '/game/member/game/channel/' + channel_code, {
            "type": "map",
            "content": {
                "area_tag": "16",
                "page": "1",
                "per_page": "10"
            }
        })
                .done(function (data) {
                    dealHomeRecommendList(appfilter(data, isIOSClient()));
                })
                .fail(function () {
                    console.log('dealHomeRecommendList error');
                });

        function dealHomeRecommendList(json) {
            if (json.count == "0") {
                var home_bigitem_title_main = document.getElementById('home_bigitem_title_main');
                home_bigitem_title_main.style.visibility = "hidden";
                return;
            }

            var home_bigitem_container = document.getElementsByClassName('home_bigitem_list');

            for (var home_recommendgame_num = 0; home_recommendgame_num < json.items.length; home_recommendgame_num++) {
                /*整个div*/
                var div_all = document.createElement('div');
                div_all.className = 'mui-row';
                div_all.id = json.items[home_recommendgame_num].id;

                /*左边div*/
                var div_left = document.createElement('div');
                div_left.className = 'mui-col-sm-6 mui-col-xs-6 scoreflag';
                var img = document.createElement('img');
                img.className = 'big_item_img';
                img.id = json.items[home_recommendgame_num].id;
                img.src = json.items[home_recommendgame_num].front_cover; //bigitem大图
                var span = document.createElement('span');
                span.className = 'big_item_img_score';
                span.innerText = formateFixedOne(json.items[home_recommendgame_num].score_avg == null ? '5.0' : json.items[home_recommendgame_num].score_avg);

                div_left.appendChild(img);
                div_left.appendChild(span);

                //有颜色的tag
                var all_tag_span = '';
                var colors = ["#7cc9ff", "#ff9999", "#4cac47", "#ffae00", "#b057ca", "#ffae00"];
                for (var colorsnum = 0; colorsnum < json.items[home_recommendgame_num].categories.length; colorsnum++) {
                    var n = Math.floor(Math.random() * colors.length + 1) - 1;
                    var span = document.createElement('span');
                    span.className = 'tag_flag';
                    span.style.color = colors[n];
                    span.style.borderStyle = "solid ";
                    span.style.borderWidth = "1px ";
                    span.style.borderColor = colors[n];
                    span.innerText = json.items[home_recommendgame_num].categories[colorsnum].name;
                    all_tag_span += span.outerHTML;
                }
                /*右边div*/
                var div_right = document.createElement('div');
                div_right.className = 'mui-col-sm-6 mui-col-xs-6';
                var div_right_html = '<div style="height: 1.5rem;"><div id="' +
                        json.items[home_recommendgame_num].id + //id
                        '" class="mui-ellipsis2 big_item_column_title" style="height:auto;float:left;clear:both;">' +
                        json.items[home_recommendgame_num].game_name + //bigitem主标题
                        '-<span class="big_item_column_title_tail">' +
                        json.items[home_recommendgame_num].game_title + //bigitem副标题
                        '</span></div><div class="div_tag_flag">' +
                        all_tag_span + //所有标签的html
                        '</div></div><div style="height:0.5rem;" class="div_bigitem_download"><span class="big_item_data iconfont icon-rili" >' +
                        formatTime(json.items[home_recommendgame_num].versions_timestamp) + //日期
                        '</span><span class="big_item_download iconfont icon-xiazai" data_android_link="' +
                        getRealLink(json.items[home_recommendgame_num].channel_game.android_link,json.items[home_recommendgame_num].android_link) + //安卓链接
                        '" data_ios_link ="' +
                        getRealLink(json.items[home_recommendgame_num].channel_game.ios_link,json.items[home_recommendgame_num].ios_link) + //IOS链接
                        '" data-code ="' +
                        json.items[home_recommendgame_num].code + //data-code
                        '" data-id ="' +
                        localStorage.getItem('user_id') + //data-code
                        '">下载</span></div></div>';
                div_right.innerHTML = div_right_html;

                /*下滑线*/
                var div_cutdown = document.createElement('div');
                div_cutdown.className = 'home_bigitem_cut_off_line';

                div_all.appendChild(div_left);
                div_all.appendChild(div_right);
                home_bigitem_container[0].appendChild(div_all);
                home_bigitem_container[0].appendChild(div_cutdown);
            }
            mui('.home_bigitem_list').on('tap', '.big_item_img', function () {
                //跳转到详情
                //						alert('home_bigitem_list--'+this.id);
                window.name = this.id;
                window.location.href = '{{ url_for('home.game_detail', game_id='') }}' + this.id;
                ;
                return false;
            })
            mui('div').on('tap', '.big_item_column_title', function () {
                //跳转到详情
                window.name = this.id;
                window.location.href = '{{ url_for('home.game_detail', game_id='') }}' + this.id;
                ;
                return false;
            })
            mui('div').on('tap', '.big_item_column_text', function () {
                //跳转到详情
                window.name = this.id;
                window.location.href = '{{ url_for('home.game_detail', game_id='') }}' + this.id;
                ;
                return false;
            })
            mui('.div_bigitem_download').on('tap', '.big_item_download', function () {
                download(this, isIOSClient(), this.getAttribute('data_ios_link'), this.getAttribute('data_android_link'));
                return false;
            })

        }


        //	获取首页精品游戏数据
        //	?page=1&per_page=5
        //	page: [可选]默认值 1 是首页；传 0 表示最后一页
        //	per_page: [可选]默认值 5 每页有五条记录
        //	tag: [可选] 标签   热门:0x0008 ，推荐:0x0010，精品:0x0020，最近更新:0x0040，新游预约:0x0080，每日发现:0x0100

        request(base_url + '/game/member/game/channel/' + channel_code, {
            "type": "map",
            "content": {
                "area_tag": "32",
                "page": "1",
                "per_page": "5"
            }
        }).done(function (data) {
            dealHomeJingPinList(appfilter(data, isIOSClient()));
        })
                .fail(function () {
                    console.log('dealHomeJingPinList error');
                });


        //首页banner的swiper
        var home_banner = new Swiper('.swiper-container-home', {
            direction: 'horizontal', //'horizontal',//'vertical',
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            // 如果需要分页器
            pagination: '.swiper-pagination',
            autoplay: 4500,
            autoplayDisableOnInteraction: false, //注意此参数，默认为true
        });


        var home_close = document.getElementById('home_close');
        home_close.addEventListener('tap', function () {
            alert("关闭");
        });
        var icon_allgame = document.getElementById('icon_allgame');
        icon_allgame.addEventListener('tap', function () {
            window.location = "{{ url_for('home.game_list') }}";
        });
        var icon_found = document.getElementById('icon_found');
        icon_found.addEventListener('tap', function () {
            window.location = "{{ url_for('home.game_found') }}";
        });
        var icon_fuli = document.getElementById('icon_fuli');
        icon_fuli.addEventListener('tap', function () {
            window.location = "{{ url_for('home.game_welfare') }}";
        });

        mui('body').on('tap', 'a', function () {
            document.location.href = this.href;
        });
    }
</script>
</body>

</html>